<template>
  <div class="map-container">
    <div class="header">
      <h2>出行轨迹</h2>
      <div class="controls">
        <button @click="startTracking" :disabled="isTracking">开始记录</button>
        <button @click="stopTracking" :disabled="!isTracking">停止记录</button>
        <button @click="showDemoTrack">显示演示轨迹</button>
        <button @click="clearTrack">清空轨迹</button>
        <button @click="centerToCurrent">定位到当前位置</button>
      </div>
    </div>
    <div id="map"></div>
    <div class="info-panel" v-if="trackPoints.length > 0">
      <div class="info-item">
        <span>轨迹点数:</span>
        <span>{{ trackPoints.length }}</span>
      </div>
      <div class="info-item">
        <span>总距离:</span>
        <span>{{ totalDistance.toFixed(2) }} 米</span>
      </div>
      <div class="info-item">
        <span>记录时长:</span>
        <span>{{ formatDuration }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 地图相关变量
let map = null
let trackPoints = ref([]) // 轨迹点数组
let polyline = null // 轨迹线
let marker = null // 当前位置标记
let watchId = null // 位置监听ID
let startTime = null // 开始记录时间

// 状态变量
let isTracking = ref(false)
let totalDistance = ref(0)

// 格式化记录时长
const formatDuration = ref('00:00:00')

// 演示轨迹坐标点（模拟一次出行轨迹）
const demoTrackPoints = [
  { longitude: 116.404, latitude: 39.915 },  // 天安门广场
  { longitude: 116.406, latitude: 39.914 },  // 东单
  { longitude: 116.408, latitude: 39.913 },  // 建国门
  { longitude: 116.410, latitude: 39.912 },  // 北京站
  { longitude: 116.412, latitude: 39.911 },  // 朝阳门
  { longitude: 116.415, latitude: 39.910 },  // 东直门
  { longitude: 116.418, latitude: 39.909 },  // 雍和宫
  { longitude: 116.420, latitude: 39.908 },  // 安定门
  { longitude: 116.422, latitude: 39.907 },  // 鼓楼
  { longitude: 116.424, latitude: 39.906 },  // 后海
  { longitude: 116.426, latitude: 39.905 },  // 什刹海
  { longitude: 116.428, latitude: 39.904 },  // 北海公园
  { longitude: 116.430, latitude: 39.903 },  // 景山公园
  { longitude: 116.432, latitude: 39.902 },  // 故宫
  { longitude: 116.434, latitude: 39.901 },  // 王府井
]

onMounted(() => {
  initMap()
})

// 初始化地图
function initMap() {
  // 确保DOM元素已经渲染后再初始化地图
  setTimeout(() => {
    try {
      // 检查BMapGL是否存在
      if (typeof BMapGL === 'undefined') {
        console.error('BMapGL is not defined')
        return
      }

      map = new BMapGL.Map("map")
      // 设置地图中心点和缩放级别为北京
      var point = new BMapGL.Point(116.404, 39.915)
      map.centerAndZoom(point, 15)
      // 启用滚轮缩放
      map.enableScrollWheelZoom(true)

      console.log('地图初始化成功')
    } catch (error) {
      console.error("地图初始化失败:", error)
    }
  }, 500) // 增加延迟确保API加载完成
}

// 显示演示轨迹
function showDemoTrack() {
  // 清除之前的轨迹
  clearTrack()
  
  // 创建演示轨迹点
  const points = demoTrackPoints.map(coord => {
    const point = new BMapGL.Point(coord.longitude, coord.latitude)
    return {
      point: point,
      timestamp: new Date(),
      latitude: coord.latitude,
      longitude: coord.longitude
    }
  })
  
  // 设置轨迹点
  trackPoints.value = points
  
  // 更新轨迹线
  updateTrackLine()
  
  // 更新距离和时间（模拟）
  totalDistance.value = 5860 // 模拟总距离约5.86公里
  formatDuration.value = '00:45:30' // 模拟时长45分30秒
  
  // 将地图视野调整到包含整个轨迹
  if (points.length > 0) {
    const bPoints = points.map(item => item.point)
    const view = map.setViewport(bPoints)
    map.setZoom(map.getZoom() - 1) // 稍微缩小一点以便更好地显示轨迹
  }
  
  // 在起点和终点添加标记
  if (points.length > 0) {
    // 起点标记
    const startPoint = points[0].point
    const startMarker = new BMapGL.Marker(startPoint, {
      title: '起点'
    })
    map.addOverlay(startMarker)
    
    // 终点标记
    const endPoint = points[points.length - 1].point
    const endMarker = new BMapGL.Marker(endPoint, {
      title: '终点'
    })
    map.addOverlay(endMarker)
  }
}

// 开始记录轨迹
function startTracking() {
  if (isTracking.value) return

  isTracking.value = true
  trackPoints.value = []
  totalDistance.value = 0
  startTime = new Date()

  // 清除之前的轨迹线
  if (polyline) {
    map.removeOverlay(polyline)
    polyline = null
  }

  // 清除之前的标记
  if (marker) {
    map.removeOverlay(marker)
    marker = null
  }

  // 检查浏览器是否支持地理位置
  if (!navigator.geolocation) {
    alert('浏览器不支持地理位置服务')
    isTracking.value = false
    return
  }

  // 开始监听位置变化
  watchId = navigator.geolocation.watchPosition(
      position => {
        try {
          const { latitude, longitude } = position.coords
          console.log('获取到位置:', latitude, longitude)

          const point = new BMapGL.Point(longitude, latitude)

          // 添加轨迹点
          trackPoints.value.push({
            point: point,
            timestamp: new Date(),
            latitude: latitude,
            longitude: longitude
          })

          // 更新轨迹线
          updateTrackLine()

          // 更新当前位置标记
          updateCurrentMarker(point)

          // 将地图中心移动到当前位置
          if (map) {
            map.panTo(point)
          }

          // 更新距离和时间
          updateDistanceAndTime()
        } catch (error) {
          console.error("位置更新失败:", error)
        }
      },
      error => {
        console.error("获取位置失败:", error)
        let errorMsg = ''
        switch(error.code) {
          case error.PERMISSION_DENIED:
            errorMsg = "用户拒绝了地理位置请求"
            break
          case error.POSITION_UNAVAILABLE:
            errorMsg = "位置信息不可用"
            break
          case error.TIMEOUT:
            errorMsg = "请求超时"
            break
          default:
            errorMsg = "获取位置时发生未知错误"
            break
        }
        alert(errorMsg)
        isTracking.value = false
      },
      {
        enableHighAccuracy: true, // 高精度
        timeout: 10000, // 超时时间
        maximumAge: 0 // 不使用缓存
      }
  )
}

// 更新轨迹线
function updateTrackLine() {
  // 如果轨迹点少于2个，不绘制轨迹线
  if (trackPoints.value.length < 2) return

  // 移除之前的轨迹线
  if (polyline) {
    map.removeOverlay(polyline)
  }

  // 创建新的轨迹线
  const points = trackPoints.value.map(item => item.point)
  polyline = new BMapGL.Polyline(points, {
    strokeColor: "#1890ff",
    strokeWeight: 5,
    strokeOpacity: 0.8
  })

  map.addOverlay(polyline)
}

// 更新当前位置标记
function updateCurrentMarker(point) {
  // 移除之前的标记
  if (marker) {
    map.removeOverlay(marker)
  }

  // 创建新的标记
  marker = new BMapGL.Marker(point)
  map.addOverlay(marker)

  // 设置标记弹窗
  const infoWindow = new BMapGL.InfoWindow(`当前位置<br>时间: ${new Date().toLocaleTimeString()}`)
  marker.setInfoWindow(infoWindow)
}

// 更新距离和时间
function updateDistanceAndTime() {
  // 计算总距离
  if (trackPoints.value.length >= 2) {
    totalDistance.value = 0
    for (let i = 1; i < trackPoints.value.length; i++) {
      const prevPoint = trackPoints.value[i-1].point
      const currPoint = trackPoints.value[i].point
      totalDistance.value += map.getDistance(prevPoint, currPoint)
    }
  }

  // 更新记录时长
  if (startTime) {
    const duration = new Date() - startTime
    const seconds = Math.floor(duration / 1000)
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    const secs = seconds % 60

    formatDuration.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
}

// 停止记录轨迹
function stopTracking() {
  if (!isTracking.value) return

  isTracking.value = false

  if (watchId) {
    navigator.geolocation.clearWatch(watchId)
    watchId = null
  }
}

// 清空轨迹
function clearTrack() {
  stopTracking()
  trackPoints.value = []
  totalDistance.value = 0
  formatDuration.value = '00:00:00'

  // 移除轨迹线
  if (polyline) {
    map.removeOverlay(polyline)
    polyline = null
  }

  // 移除标记
  if (marker) {
    map.removeOverlay(marker)
    marker = null
  }
}

// 定位到当前位置
function centerToCurrent() {
  if (!navigator.geolocation) {
    alert('浏览器不支持地理位置服务')
    return
  }

  navigator.geolocation.getCurrentPosition(
      position => {
        try {
          const { latitude, longitude } = position.coords
          const point = new BMapGL.Point(longitude, latitude)

          // 更新当前位置标记
          updateCurrentMarker(point)

          // 将地图中心移动到当前位置
          if (map) {
            map.panTo(point)
            map.setZoom(17) // 放大到更详细的级别
          }
        } catch (error) {
          console.error("定位失败:", error)
          alert('定位失败: ' + error.message)
        }
      },
      error => {
        console.error("获取位置失败:", error)
        let errorMsg = ''
        switch(error.code) {
          case error.PERMISSION_DENIED:
            errorMsg = "用户拒绝了地理位置请求"
            break
          case error.POSITION_UNAVAILABLE:
            errorMsg = "位置信息不可用"
            break
          case error.TIMEOUT:
            errorMsg = "请求超时"
            break
          default:
            errorMsg = "获取位置时发生未知错误"
            break
        }
        alert(errorMsg)
      },
      {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 0
      }
  )
}

// 组件卸载时清理
onBeforeUnmount(() => {
  stopTracking()
})
</script>

<style scoped>
.map-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  padding: 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.header h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.controls button {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.controls button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.controls button:hover:not(:disabled) {
  background: #40a9ff;
}

#map {
  flex: 1;
  width: 100%;
}

.info-panel {
  padding: 10px;
  background: #f5f5f5;
  border-top: 1px solid #ddd;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-item span:first-child {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}

.info-item span:last-child {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

@media (max-width: 768px) {
  .controls {
    flex-direction: column;
  }

  .info-panel {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}
</style>